// 引入当前less
require('../less/mySportsData.less')

// 文档加载完成
document.ready(() => {
    // console.log('我的运动数据');
    // 获取dom
    let toBackBtn = document.querySelector('#toBackBtn')
    let headImg = document.querySelector('#headImg')  //头像

    // 从本地存储获取当前用户的id
    let userId = JSON.parse(localStorage.getItem('user')).userId
    console.log(userId);

    // 页面加载时调用
    getSportsData()
    gethistogram() //柱状图
    showPie() //饼图
    getHorBar() //横向条状图
    getLineChart() //折线图


    // 封装函数，显示数据
    function getSportsData() {
        // 发送ajax请求
        axios.get(window.$utils.BASE_URL + '/users/mysportsBadge?userId=' + userId)
            .then((result) => {
                let res = result.data
                console.log(res);
                if (res.status === 0) {
                    headImg.src = res.data.user.imgurl ? window.$utils.BASE_URL + res.data.user.imgurl : require("../img/headerPic.jpg")
                }
            })
            .catch((error) => {
                console.log(error);
            })
    }

    // 封装，显示饼图
    function showPie() {
        // 定义饼图颜色
        let pieColor = ["#58BB92", "#736171", "#EE5C43"]
        // 发送ajax请求
        axios.get(window.$utils.BASE_URL + "/sport/data/" + userId)
            .then((result) => {
                let res = result.data
                if (res.status === 0) {
                    // 获取成功
                } else if (res.status === 1) {
                    // 获取失败,因接口问题,将模拟获取到了数据
                    // 定义数组，保存数据
                    let pieArr = []
                    //服务器返回的数据格式
                    let exerciseData = [
                        {
                            "id": null,
                            "date": "2020-12-22",
                            "type": "骑行",
                            "time": "231",
                            "numberoftimes": "7"
                        },
                        {
                            "id": null,
                            "date": "2020-12-22",
                            "type": "跑步",
                            "time": "252",
                            "numberoftimes": "7"
                        },
                        {
                            "id": null,
                            "date": "2020-12-22",
                            "type": "训练",
                            "time": "266",
                            "numberoftimes": "7"
                        }
                    ]
                    // 遍历数组
                    pieArr = exerciseData.map(function (v) {
                        return {
                            value: v.time,
                            name: v.type
                        }
                    })
                    // 拼接后面的颜色
                    pieArr.forEach(function (v, i) {
                        v.itemStyle = { color: pieColor[i] }
                    })
                    // 调用饼图函数
                    getpie(pieArr)
                }
            })
            .catch((error) => {
                console.log(error);
            })
    }

    // 给toBackBtn 返回按钮 添加点击事件
    toBackBtn.addEventListener('click', function () {
        // 返回上一级
        window.history.go(-1)
    })

    // 封装柱状图
    function gethistogram() {
        let histogram = document.querySelector('#histogram')
        var myChart = echarts.init(histogram);
        var option;
        option = {
            title: {
                text: "近7天运动时长",
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            xAxis: {
                type: 'category',
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: '#bbb'
                },
                itemStyle: {
                    color: '#83A7D1'
                }
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    // 封装饼图
    function getpie(pieArr) {
        let pie = document.querySelector('#pie')
        var myChart = echarts.init(pie);
        const option = {
            title: {
                text: '运动分类',
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 20,
                top: 'middle',
                data: ['跑步', '骑行', '训练'],
                icon: 'roundRect',
                itemWidth: 10,
                itemHeight: 10,
            },
            series: [
                {
                    name: '运动分类',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: pieArr,
                    label: {
                        color: '#fff',
                        show: true,
                        position: 'inside',
                        formatter: '{d}%',
                    }
                }]
        }
        myChart.setOption(option)
    }

    // 封装横向条状图
    function getHorBar() {
        let horBar = document.querySelector('#horBar')
        var myChart = echarts.init(horBar);
        const option = {
            title: {
                text: '近七日运动分类',
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['跑步', '骑行', '训练'],
                left: '85%',
                top: 'middle',
                orient: 'vertical',
                itemWidth: 10,
                itemHeight: 10,
            },
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            series: [
                {
                    name: '跑步',
                    type: 'bar',
                    stack: '总量',
                    data: [320, 302, 301, 334, 390, 330, 320],
                    itemStyle: {
                        color: '#558ED5'
                    }
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210],
                    itemStyle: {
                        color: '#93CDDD'
                    }
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310],
                    itemStyle: {
                        color: '#92D050'
                    }
                },

            ]
        }
        myChart.setOption(option)
    }

    // 封装折线图
    function getLineChart() {
        let lineChart = document.querySelector('#lineChart')
        var myChart = echarts.init(lineChart);
        const option = {
            title: {
                text: '近七日训练次数',
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                left: 10,
                top: 10,
            },
            xAxis: {
                type: 'category',
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [1, 3, 8, 10, 5, 2, 7],
                type: 'line',
                itemStyle: {
                    color: '#79C2B3'
                }
            }]
        }
        myChart.setOption(option)
    }

})